<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幽灵按钮</title>
    <style>
        .bigbox{
            width: 100%;height: 300px;background: #333;
            text-align: center;/*给里面所有的文本都在其父容器中水平居中*/
        }
        .bigbox  .smallbox{
            box-sizing: border-box; /* 设置了该属性后，width、height此时指的是边框以内的尺寸 */
            display: inline-block; /* 行内块元素：一行显示多个，可以设置宽高*/
            width: 270px;height: 300px;margin-right: 15px;
            /* 设置了行内块级元素，则存在文本基线对齐的问题:  
                    - vertical-align：top、bottom、middle 
                    - 该属性只能用于行内元素、行内块元素 */
            vertical-align: top;
        }
        .bigbox  .smallbox.last{
            margin-right: 0;
        }
        .bigbox  .smallbox  .btn{
            box-sizing: border-box;/* 设置了该属性后，width、height此时指的是边框以内的尺寸*/
            width: 200px;height: 30px;
            padding-left: 20px;
            border: 1px solid #fff;
            /* 实现块级元素水平居中 */ margin-left: auto;margin-right: auto;
            /* 实现文本靠左显示 */ text-align: left;
            /* 实现单行文本在容器中垂直居中： 将line-height行高(一行文本的高度)，设置成高度一样
                - 利用文字在其当前行中一定是垂直居中的特性*/
            line-height: 30px;
            /* 字体 */ color: #58bc58; font-size: 14px; font-weight: bold;
            position: relative;
        }
        .bigbox .smallbox>img{
            height: 170px;
            margin: 20px 0;
            transition: transform 0.5s linear;
        }
        .bigbox .smallbox>img:hover{
            transform: rotate(360deg);
        }
        .bigbox .btn .left-line{
            width: 0;height: 1px;background: #fff;
            position: absolute;left: -100%;top: -1px;
            transition: all 0.1s linear;
        }
        .bigbox .btn .right-line{
            width: 100%;height: 1px;background: #fff;
            position: absolute;right: -100%;bottom: -1px;
        }
        .bigbox .btn .top-line{
            width: 1px;height: 100%;background: #fff;
            position: absolute;right: -1px;top: -100%;
        }
        .bigbox .btn .bottom-line{
            width: 1px;height: 100%;background: #fff;
            position: absolute;left: -1px;bottom: -100%;
        }
        .bigbox .btn:hover .left-line{
            width: 100%;left: 0;
        }
    </style>
</head>
<body>
    <!-- div>span*3 -->
    <div class="bigbox">
        <div class="smallbox">
            <img src="imgs/mission.png">
            <div class="btn">
                MISSION
                <div class="left-line"></div>
                <div class="right-line"></div>
                <div class="top-line"></div>
                <div class="bottom-line"></div>
                <img src="imgs/arrow.png" alt="">
            </div>
        </div>
        <div class="smallbox">
            <img src="imgs/play.png">
            <div class="btn">
                PLAY
            </div>
        </div>
        <div class="smallbox last">
            <img src="imgs/touch.png">
            <div class="btn">
                TOUCH
            </div>
        </div>
    </div>
</body>
</html>